import { t } from 'i18next'
import { forwardRef, useEffect, useState } from 'react'
import { DetailWrap } from './style'
import { OverLayExtraProps } from '@kedacom/react-next'
import { RoomEntity, meetingDetailEntity, regularRooms } from '@/api/detail/interface'
import { fetchGetMeetingRoom } from '@/api/global'
import { Utils } from '@/pages/meetingList/MeetingCard/utils'

interface roomInfo {
	/**区域数量*/
	region_num: number
	/**会议室数量*/
	room_num: number
	/**展现具体的信息 */
	_show_arr: Array<{
		region: string
		room: string
		date: string
	}>
}
type PopUpProps = {
	rooms: Array<RoomEntity> | Array<regularRooms> | undefined
	isRepeat?: boolean
} & OverLayExtraProps
const Room = forwardRef((props: PopUpProps, ref: any) => {
	const { rooms, ...restProps } = props
	const [roomsDetailInfo, setRoomsDetailInfo] = useState<roomInfo>({
		region_num: 0,
		room_num: 0,
		_show_arr: [],
	})
	useEffect(() => {
		fetchRoomInfo()
	}, [props.rooms])
	const fetchRoomInfo = async () => {
		if (!rooms) return
		let roomObj: any = { len: 0 }
		let regionObj: any = { len: 0 }
		let _date: string = '' /**日期 */
		let _show_arr = []
		if (props.isRepeat) {
			for (let i = 0, len = rooms.length; i < len; i++) {
				const item = rooms[i] as regularRooms
				for (let j = 0, jLen = item.meeting_rooms.length; j < jLen; j++) {
					const room = item.meeting_rooms[j]
					//计算重复会议区域
					//计算重复会议区域
					if (roomObj[room.id] == undefined) {
						roomObj[room.id] = room.id
						roomObj.len++
					}
					_date = item.day.replace('T', ' ') /**赋值日期 */
					//根据roomid去获取区域信息
					const res = await fetchGetMeetingRoom(`/meeting_room/${room.id}`)
					if (!res.success) {
						continue
					}
					//计算非重复会议室数量
					if (regionObj[res.data.region_name] == undefined) {
						regionObj[res.data.region_name] = res.data.region_name
						regionObj.len++
					}
					_show_arr.push({
						date: _date,
						region: Utils.shorten(Utils.code.encodeHTML(res.data.region_name), 25),
						room: room.name ? Utils.shorten(Utils.code.encodeHTML(room.name), 25) : 'null',
					})
				}
			}
		} else {
			for (let j = 0, len = rooms.length; j < len; j++) {
				let room = rooms[j] as RoomEntity
				//计算非重复会议区域
				if (roomObj[room.id] == undefined) {
					roomObj[room.id] = room.id
					roomObj.len++
				}
				console.log(roomObj, room.id, `meeting_room/${room.id}`)
				//根据roomid去获取区域信息
				try {
					const res = await fetchGetMeetingRoom(`/meeting_room/${room.id}`)
					if (!res || !res.success) {
						continue
					}
					//计算非重复会议室数量
					if (regionObj[res.data.region_name] == undefined) {
						regionObj[res.data.region_name] = res.data.region_name
						regionObj.len++
					}
					_show_arr.push({
						date: _date,
						region: Utils.shorten(Utils.code.encodeHTML(res.data.region_name), 25),
						room: room.name
							? Utils.shorten(Utils.code.encodeHTML(room.name), 25)
							: '<span style="color:red;">' + t('无') + '</span>',
					})
				} catch (error) {
					console.log(error)
				}
			}
		}
		console.log({
			room_num: roomObj.len,
			region_num: regionObj.len,
			_show_arr: _show_arr,
		})
		setRoomsDetailInfo({
			room_num: roomObj.len,
			region_num: regionObj.len,
			_show_arr: _show_arr,
		})
	}
	return (
		<DetailWrap className="rooms_dialog_detail" ref={ref} {...restProps}>
			<div className="rooms_dialog_content">
				<div className="rooms_dialog_time_wrap">
					<span></span>
				</div>
				<div className="rooms_dialog_num_wrap">
					{t('共有{{region_num}}个区域{{room_num}}个会议室', {
						region_num: roomsDetailInfo?.region_num ?? 0,
						room_num: roomsDetailInfo?.room_num ?? 0,
					})}
				</div>
				{roomsDetailInfo?._show_arr.map((item, index) => {
					return (
						<div className="rooms_dialog_name_wrap" key={index}>
							{item.date && <div className="rooms_region_name">{item.date}</div>}
							<div className="rooms_region_name">{item.region}</div>
							{item.room === 'null' ? (
								<div className="rooms_room_name" style={{ color: 'red' }}>
									{t('无')}
								</div>
							) : (
								<div className="rooms_room_name">{item.room}</div>
							)}
						</div>
					)
				})}
			</div>
		</DetailWrap>
	)
})
export default Room
